<!--comment.vue-->
<template>
<div>
<mu-appbar title="评价详情">
  <mu-icon-button icon="arrow_back" slot="left" v-on:click="handleBack"/>
	<mu-icon-button id="id_comment_detail" icon="comment" slot="right" @click="handleComment"/>
</mu-appbar>

<div id="id_profile" @click="handleProfile">
<mu-card>
  <mu-card-header :title="`姓名:${this.comment.name}`" :subTitle="`电话:${this.comment.mobile}`">
    <mu-avatar :src="IconAvatar" slot="avatar"/>
  </mu-card-header>
	</mu-card>
</div>

	<div id="id_comment">
    {{ comment.feed }}
	</div>

</div>

</template>

<style>
  .mu-card-header{
    text-align:left;
  }
	#id_comment{
			margin:0.5rem;
			text-align:left;
	}
</style>

<script>
import iconAvatar from '@/assets/img/uicon.jpg';

export default {
  data() {
    return {
      IconAvatar: iconAvatar,
    };
  },
  created() {
  },
  mounted() {
  },
  updated() {
  },
  destroyed() {
  },
  computed: {
    comment() {
      // return this.$store.getters.getFeeds.find(feed => this.feedFilterById(feed));
      //  string2integer vue过滤器
      const feedId = parseInt(this.$route.params.commentId, 10);
      return this.$store.getters.getFeedById(feedId);
    },
  },
  methods: {
    handleBack() {
      this.$router.back();
    },
    handleComment() {
      this.$router.push('/comment');
    },
    handleProfile() {
      this.$router.push(`/profile/${this.comment.mobile}`);
    },
  },
};
</script>
